<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <h2>用户详情</h2>
    <div class="widget-title">
        <input type="text" placeholder="请输入用户账号..." name="userName" id="userName" value="${requestScope.userName==null?'':requestScope.userName}">
        <input type="button" id="searchBtn" value="搜索"/>


    </div>

    <hr/>
  <%--  <a href="#"><button type="button" id="getAll"><i>&#xe608;</i> 添加</button></a>--%>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>用户账号</th>
            <th>联系方式</th>
            <th>个性签名</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="allUsers">

        </tbody>
    </table>

    <div >
    <!-- 分页信息 -->
    <div id="showPageInfo">

    </div>
    <!-- 实现分页 -->
        <div class="pagination Alternate" id="gotoPageDiv">
            <ul id="pageItem" class="pagination">

            </ul>
        </div>
    </div>

</div>

</body>
<script>
    var key="";
$(function () {
    showUsers();
    $.ajaxSetup({
        complete: function (xhr, status) {
            //拦截器实现超时跳转到登录页面
            // 通过xhr取得响应头
            var REDIRECT = xhr.getResponseHeader("REDIRECT");
            //如果响应头中包含 REDIRECT 则说明是拦截器返回的
            if (REDIRECT == "REDIRECT") {
                var win = window;
                while (win != win.top) {
                    win = win.top;
                }
                //重新跳转到 login.html
                win.location.href = xhr.getResponseHeader("CONTENTPATH");
            }
        }
    });
    //首页
    $(document).on("click",".first",function(){
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:1,size:8},
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
       })
    });
    //末页
    $(document).on("click",".last",function(){
        //获取末页值
        var totalPage=$("#totalPage").text();
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:totalPage,size:8},
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
        })
    });

    //下一页
    $(document).on("click",".next",function(){
        //获取下一页值
        var pageNo = $("#pageNo").text();
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:parseInt(pageNo)+1,size:8},
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
        })
    });

    //每一页
    $(document).on("click",".currentPage",function(){
        //获取当前选中的页码
        var pageNo = $(this).text();
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:pageNo,size:8},
            type:"POST",
             dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
        })
    });

    //跳转
    $(document).on("click",".turnto",function(){
        //获取number框的值
        var pageNo = $("#turntoId").val();
        //获取末页值
        var totalPage=$("#totalPage").text();

        //判断
        if(pageNo<1){
            pageNo=1;
            $("#turntoId").val(pageNo);
        }else if(pageNo > totalPage*1){
            pageNo=totalPage;
            $("#turntoId").val(pageNo);
        }
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:pageNo,size:8},
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
        })
    });

    //搜索按钮的模糊查询事件
    $("#searchBtn").click(function(){
        //用户输入的模糊查询关键字
        key=$("#userName").val();
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            data:{userName:key,pageNum:1,size:8},
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                showUsers();
            }
        })

    });
})
    //修改用户状态
    //注销
    function logoutUser(userId){
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/logoutUser",
            data:{userId:userId},
            type:"POST",
            success:function () {
                //显示用户的方法
                showUsers();
            }
        })
    }
    //启用
    function startUser(userId){
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/startUser",
            data:{userId:userId},
            type:"POST",
            success:function () {
                //显示用户的方法
                showUsers();
            }
        })
    }

    //刷新显示用户信息
    function showUsers() {
        $.ajax({
            url:"${pageContext.request.contextPath}/UserManageController/findUsers",
            type:"POST",
            dataType:"json",
            success:function (data) {
                //显示用户的方法
                //得到list在所有用户的信息
                var user = data.list;
                //alert(data.pages);
                //遍历
                //每次遍历前清空数据
                $("#allUsers").empty();
                $("#showPageInfo").empty();
                $("#pageItem").empty();
                $.each(user, function (n, user) {
                    var status = "";
                    var buttons = '';
                    if (user.userStatus == 1) {
                        status = "正常";
                        buttons = '<a href="javascript:logoutUser(' + user.userId + ')" ><button class="btn btn-danger btn-primary btn-xs">注销</button></a>';
                    } else {
                        status = "已注销";
                        buttons = '<a href="javascript:startUser(' + user.userId + ')" ><button class="btn btn-info btn-primary btn-xs">启用</button></a>';
                    }
                    $("#allUsers").append("<tr class=\"gradeX\">\r\n" +
                        "									<td>" + user.userId + "</td>\r\n" +
                        "									<td>" + user.userName + "</td>\r\n" +
                        "									<td>" + user.userTel + "</td>\r\n" +
                        "									<td>" + user.userSign + "</td>\r\n" +
                        "									<td>" + status + "</td>\r\n" +
                        "									<td><a href=\"#\"onclick=\"getvaluefun (this)\"> \r\n" +
                        "										<button onclick='jump("+user.userId+")' class=\"btn btn-success btn-primary  btn-xs\">查看动态</button></a> " + buttons + "</td>\r\n" +
                        "									</tr>");
                });

                 //分页信息
                $("#showPageInfo").append("<p>当前第<span id='pageNo'>"+data.pageNum+"</span>页/共<span id='totalPage'>"+data.pages+"</span>页/每页显示<span id='pageSize'>"+data.size+"</span>条/共<span id='totalCount'>"+data.total+"</span>条数据</p>");
                //首页
                if (1 == data.pageNum) {
                    $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
                } else {
                    $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
                }
                //显示分页栏目
                for (var i = 1; i <= data.pages; i++) {
                    if (i == data.pageNum) {
                        $("#pageItem").append('<li class="active"><a href="#">' + i + '</a></li>');
                    } else {
                        $("#pageItem").append('<li><a href="#" class="currentPage">' + i + '</a></li>');
                    }
                }
                //下一页
                if (data.pageNum == data.pages) {
                    $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
                } else {
                    $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
                }
                //末页
                if (data.pageNum == data.pages) {
                    $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
                } else {
                    $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
                }
                //跳转页
                $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId" min="1" max="' + data.pages + '" style="height:20px"/></a></li>');
                $("#pageItem").append('<li><a href="#" class="turnto">跳转</a></li>');
            }
        });


    }

    function jump(id) {
        location.href="${pageContext.request.contextPath}/back/showNews.jsp?userId="+id

    }
</script>
<style>
    #pageItem li{
        height:24px;
        text-align: center;
        list-style:none;
        float:left;
    }
    #allUsers td{
        text-align: center;
    }
    th{text-align: center;}
    #gotoPageDiv{
        height:30px;
    }
</style>
</html>